<script setup lang='ts'>
// 自定义 规则
//interface Props {
//}
// 页面与弹出层 //url:项目内页面 //pop:弹出层 //https:第三方外部链接
type OperateListItemType = 'url' | 'pop' | 'https'
interface OperateListItem {
  name: String,
  type: OperateListItemType,
  path?: string
}
import { onMounted, ref, reactive, defineProps } from 'vue';
//const { } = defineProps<Props>();
import NavBar from '@/components/Navbar/index.vue'
import Tabbar from '@/components/Tabbar/index.vue'
import Box from '@/components/Box/index.vue'
import { navigateTo } from '@/public';
import Boxbg from '@/components/Boxbg/index.vue';
import AlIcon from '@/components/AliIcon/index.vue'
/**
 * @property 变量
 */
// 个人操作列表
const operateList = reactive<Array<OperateListItem>>([{
  name: '我的地址',
  type: 'url',
  path: '/subPackages/userPage/myAddress'
}, {
  name: '平台客服',
  type: 'url',
  path: '/subPackages/userPage/onlineService'
}, {
  name: '账号管理',
  type: 'url',
  path: '/subPackages/userPage/accountAdmin'
}, {
  name: '用户协议',
  type: 'url',
  path: '/subPackages/userPage/protocolPolicy?type=agreement'
}, {
  name: '隐私协议',
  type: 'url',
  path: '/subPackages/userPage/protocolPolicy?type=policy'
}, {
  name: '租赁协议',
  type: 'url',
  path: ''
}])

/**
 * @property  所有请求以api开头 如:apiDataInfo
 * / 


/**
 * @property 自定义事件 以事件名开头 如: clickButton,inputDev
 */
// 点击用户可操作项
const clickCellItem = (item: OperateListItem) => {
  // 判断其所需要的方式 进行操作
  if (item.type === 'url') {
    // 跳转页面
    item.path && navigateTo(item.path)
  }
}

/**
 * @property 内置方法
 */


</script>
<template>
  <Boxbg class-nme=" h-[100vh]" bg-img="user" bgh="360">
    <NavBar title="我的" bg-color="transparent" :leftIcon="false" />
    <!-- 用户头像信息 -->
    <div class="w-[100%] pt-3.5 pb-3.5 flex">
      <div class="size-132 b-rd-[50%]" style="border: 2rpx solid #fff;">
        <img src="https://img1.baidu.com/it/u=2931243091,718249849&fm=253&fmt=auto&app=120&f=JPEG?w=569&h=427" alt=""
          class="b-rd-[50%] size-128" />
      </div>
      <div class="flex-1 ml-3.5 c-[#fff] flex flex-col fcb pt-1.25 pb-1.25">
        <text class="font-size-48 fw500">发财发大财</text>
        <text class="font-size-28">1t789134r79829</text>
      </div>
    </div>
    <!-- 押金钱包 -->
    <div class='frb'>
      <div class="w-333 h-132 b-rd-2 bg-[#fff] p-3.5 flex pr-3"
        @click="navigateTo('/subPackages/userPage/deposit/index')">
        <AlIcon icon-name="Deposit-user" size="72" />
        <div class=" ml-2 fcb">
          <text class="font-size-28">我的押金</text>
          <text class="font-size-24 c-[#A7A7A7]">退押金、押金明细</text>
        </div>
      </div>
      <div class="w-333 h-132 b-rd-2 bg-[#fff] p-3.5 flex pr-3" @click="navigateTo('/subPackages/userPage/wallet')">
        <AlIcon icon-name="Wallet-user" size="72" />
        <div class=" ml-2 fcb">
          <text class="font-size-28">我的钱包</text>
          <text class="font-size-24 c-[#A7A7A7]">充值购买套餐</text>
        </div>
      </div>
    </div>
    <Box :is-title="false" style="padding-top: 0; padding-bottom: 0;">
      <up-cell-group :border="false">
        <up-cell :title="item.name" v-for="(item, i) in operateList" :key="i" :border="i !== operateList.length - 1"
          isLink @click="clickCellItem(item)" rightIconStyle="color:#A7A7A7; font-size:28rpx;"></up-cell>
      </up-cell-group>

    </Box>
  </Boxbg>
  <Tabbar type="user" />

</template>
<style lang="scss" scoped>
:deep(.u-cell__body) {
  padding: 28rpx 0 !important;
}

:deep(.u-cell__title-text) {
  font-size: 28rpx;
}
</style>